<template>
  <el-dialog
    top="30px"
    width="900px"
    append-to-body
    title="申请人财务情况"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <table class="table table-bordered table-sm bg-white table-vertical-middle text-center">
      <colgroup>
        <col width="12%" />
        <col width="20%" />
        <col width="12%" />
        <col width="18%" />
        <col width="18%" />
        <col width="20%" />
      </colgroup>
      <tr>
        <td colspan="3">资产负债情况 时间：</td>
        <td class="report-input-td">
          <el-date-picker
            v-model="financeInfo.ZFDATE"
            class="report-diy-period w-100"
            type="month"
            align="right"
            value-format="yyyy-MM"
            placeholder="请选择时间"
          ></el-date-picker>
        </td>
        <td>损益情况 时间：</td>
        <td class="report-input-td">
          <el-date-picker
            v-model="financeInfo.SYDATE"
            class="report-diy-period w-100"
            type="month"
            align="right"
            value-format="yyyy-MM"
            placeholder="请选择时间"
          ></el-date-picker>
        </td>
      </tr>
      <template v-for="(p, index) of financeData">
        <tr :key="index">
          <td>{{ p.label1 }}</td>
          <td class="report-input-td">
            <el-input
              v-model="financeInfo[p.prop1]"
              :placeholder="`${p.label1}`"
              v-input-number="{ fixed: 4 }"
            ></el-input>
          </td>
          <td>{{ p.label2 }}</td>
          <td class="report-input-td">
            <el-input
              v-model="financeInfo[p.prop2]"
              :placeholder="`${p.label2}`"
              v-input-number="{ fixed: 4 }"
            ></el-input>
          </td>
          <td>{{ p.label3 }}</td>
          <td class="report-input-td">
            <el-input
              v-model="financeInfo[p.prop3]"
              :placeholder="`${p.label3}`"
              v-input-number="{ fixed: 4 }"
            ></el-input>
          </td>
        </tr>
      </template>
      <tr>
        <td>备注</td>
        <td colspan="5" class="report-input-td">
          <el-input
            type="textarea"
            v-model="hotel.finance_remark"
            placeholder="备注"
            :rows="3"
          ></el-input>
        </td>
      </tr>
    </table>
    <div class="text-center mt-5">
      <el-button type="primary" class="btn-long" :loading="saveLoading" @click="handleConfirm">
        提交
      </el-button>
      <el-button class="btn-long" :loading="saveLoading" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { financeData } from '@/bigcredit/views/program/components/report/Index'
export default {
  components: {},
  props: {
    visible: Boolean,
    queryId: String,
    formData: { type: Object, default: () => ({}) },
    hotelData: { type: Object, default: () => {} },
  },
  data() {
    return {
      financeData,
      financeInfo: {},
      hotel: {},
      hotelTable: 'credit_industrial_hotel_invest',
      financeTable: 'finance_info',
      saveLoading: false,
    }
  },
  computed: {},
  watch: {
    formData: {
      handler: function () {
        this.financeInfo = { ...this.formData }
      },
      immediate: true,
      deep: true,
    },
    hotelData: {
      handler: function () {
        this.hotel = { ...this.hotelData }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleConfirm() {
      if (!this.financeInfo.id) {
        this.postData()
      } else {
        this.putData()
      }
    },
    postData() {
      this.saveLoading = true
      Object.keys(this.financeInfo).forEach(key => {
        if (!this.financeInfo[key]) {
          this.financeInfo[key] = null
        }
      })
      Promise.all([
        this.$api.addData(this.$serviceName, this.financeTable, {
          ...this.financeInfo,
          customer_related_id: this.queryId,
        }),
        this.$api.updateData(this.$serviceName, this.hotelTable, this.hotel.id, this.hotel),
      ])
        .then(() => {
          this.$message.success('保存成功')
          this.handlerSuccess()
          this.beforeClose()
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '保存失败，请重试！')
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    putData() {
      this.saveLoading = true
      Object.keys(this.financeInfo).forEach(key => {
        if (!this.financeInfo[key]) {
          this.financeInfo[key] = null
        }
      })
      Promise.all([
        this.$api.updateData(
          this.$serviceName,
          this.financeTable,
          this.financeInfo.id,
          this.financeInfo
        ),
        this.$api.updateData(this.$serviceName, this.hotelTable, this.hotel.id, this.hotel),
      ])
        .then(() => {
          this.$message.success('保存成功')
          this.handlerSuccess()
          this.beforeClose()
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '保存失败，请重试！')
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handlerSuccess() {
      this.$emit('success', true)
      this.$emit('getRemark', true)
    },
  },
}
</script>

<style lang="scss" scoped>
.report-input-td {
  background-color: #ffffee;
}
</style>
